<template>
	<view class="page_box">
		<!-- <view class="">
			<view class="coupon-nav x-f">
				<view
					class="nav-item y-f"
					v-for="nav in couponsState"
					:key="nav.id"
					@tap="onNav(nav.id)"
				>
					<view class="item-title">{{ nav.title }}</view>
					<text
						class="nav-line"
						:class="{ 'line-active': stateCurrent === nav.id }"
					></text>
				</view>
			</view>
		</view> -->
		
		 <view class="content_box1" v-if="stateCurrent === 0">
			<view class="top">
				<view class="layer">
					<text>销售奖励</text>
					<image src="../../static/imgs/885.png" mode=""></image>
				</view>
				<view class="scndFlr">￥{{ indvBonusPool.money || 0 }}</view>
				<view class="line"></view>
				<view class="progressBar">
					<text class="text1">个人消费</text>
					
					<u-line-progress
						active-color="#FFE8BE"
						:percent="indvBonusPool.persona"
						style="width: 336rpx; margin: 0 20rpx;
						"
						:striped-active="true"
						:striped="true"
						
						:show-percent="false"
						inactive-color="transparent"
					></u-line-progress>
					<text class="text2">已消费/额度</text>
				</view>
				<view class="progressBar1">
					<text class="text1">拼团消费</text>
					<u-line-progress
						active-color="#FFE8BE"
						:percent="indvBonusPool.team"
						style="width: 336rpx; margin: 0 20rpx;
						"
						:striped-active="true"
						:striped="true"
						
						:show-percent="false"
						inactive-color="transparent"
					></u-line-progress>
					<text class="text2">已消费/额度</text>
				</view>
				<view class="bottom">
					规则:每消费{{indvBonusPool.fei_price || 0 }}元可以获得1个销售点：每拼团成功{{indvBonusPool.spe_price || 0}}元，可
					获得1个销售点。
				</view>
			</view>
			<view class="consumptionFlow">
				<image src="../../static/imgs/tuo.png" mode=""></image>
				<text>消费流水</text>
			</view>
			<view
				class="list"
				v-for="(item, index) in indvBonusPool.list"
				:key="index"
			>
				<view class="left">{{ item.type }}</view>
				<view class="right">
					<text class="text">新增{{ item.number || 0}}个销售点</text>
					<text class="text1">{{ item.create_time  }}</text>
				</view>
			</view>
		</view> 
		
		
		<!-- 
		<view class="content_box2" >
			<view class="top">
				<view class="layer">
					<text>分红流水</text>
					<image src="../../static/imgs/885.png" mode=""></image>
				</view>
				<view class="scndFlr">￥{{ teamBonusPool.money || 0 }}</view>
				<view class="line"></view>
				
				<view class="progressBar1" style="justify-content: flex-start">
					<text class="text1">
						已获得：{{ teamBonusPool.personal || 0}}个团队分红点
					</text>
				</view>
				<view class="bottom">
					规则:每消费**元可以获得1个分红点：每拼团成功**元，可
					获得1个分红点。
				</view>
			</view>
			<view class="consumptionFlow">
				<image src="../../static/imgs/tuo.png" mode=""></image>
				<text>我的团队</text>
			</view>

			<view
				class="list"
				v-for="(item, index) in teamBonusPool.list"
				:key="index"
				@click="jump('/pages/user/usrLst')"
			>
				<view class="left1">
					<image :src="item.avatar" mode=""></image>
					<text>{{ item.nickname }}</text>
				</view>
				<view class="right">
					<text class="text">已完成 {{ item.plan }}</text>
					
				</view>
			</view>
		</view> -->
		<!-- <view class="content_box3" v-if="stateCurrent === 2">
			<view class="top">
				<view class="layer">
					<text>奖金池余额</text>
					<image src="../../static/imgs/885.png" mode=""></image>
				</view>
				<view class="scndFlr">￥{{ activityBonusPool.money|| 0  }}</view>
			</view>
			<view class="consumptionFlow">
				<image src="../../static/imgs/tuo.png" mode=""></image>
				<text>消费流水</text>
			</view>

			<view
				class="list"
				v-for="(item, index) in activityBonusPool.list"
				:key="index"
			>
				<view
					class="left"
					style="display: flex; flex-direction: column;"
				>
					<text>{{ item.is_type }}</text>
					<text
						style="font-size: 12rpx; color: #999999; font-weight: 500; "
					>
						备注: {{ item.note }}
					</text>
				</view>
				<view class="right">
					<text class="text">{{ item.money }}</text>
					<text class="text1">{{ item.create_time }}</text>
				</view>
			</view>
		</view> -->
		<view class="foot_box"></view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
import shoprpCoupon from '@/components/shopro-coupon/shopro-coupon.vue';
export default {
	components: {
		shoprpCoupon
	},
	data() {
		return {
			stateCurrent: 0,
			// couponsState: [
			// 	{
			// 		id: 0,
			// 		title: '个人奖金池'
			// 	},
			// 	{
			// 		id: 1,
			// 		title: '团队奖金池'
			// 	},
			// 	{
			// 		id: 2,
			// 		title: '活动奖金池'
			// 	}
			// ],

			indvBonusPool: {}, // 个人奖金池
			teamBonusPool: [], // 团队奖金池
			activityBonusPool: [], // 活动奖金池
			money: {}
		};
	},
	computed: {},
	onLoad(e) {
		// 进入不同的tab栏 stManagementMde warehouse
		//this.stateCurrent = this.$route.query.id;

		this.getCouponList();
		this.getUsers();
	},
	methods: {
		// 获取用户的id
		async getUsers() {
			const res = await this.$api('user.info');
			var uid = res.data.id;
			this.getIndv(uid);
			this.getTheTeam(uid);
			this.getActivity(uid);
		},
		//获取个人奖金池
		async getIndv(uid) {
			console.log('uid :>> ', uid);
			const res = await this.$api('indvBonusPool', {
				uid: uid
			});
			console.log('获取个人奖金池1111111 :>> ', res);
			this.indvBonusPool = res;
			this.money.money0 = res.money;
		},
		//获取团队奖金池
		async getTheTeam(uid) {
			console.log('uid :>> ', uid);
			const res = await this.$api('teamBonusPool', {
				uid: uid
			});
			console.log('获取团队奖金池 :>> ', res);
			this.teamBonusPool = res;
			this.money.money1 = res.money;
		},
		//获取活动奖金池
		async getActivity(uid) {
			console.log('uid :>> ', uid);
			const res = await this.$api('activityBonusPool');
			console.log('获取活动奖金池 :>> ', res);
			this.activityBonusPool = res;
			this.money.money2 = res.money;
			//this.storedAmt()
		},
		

		onNav(id) {
			this.stateCurrent = id;
			this.couponList = [];
			this.getCouponList();
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		getCouponList() {
			let that = this;
			that.$api('coupons.list', {
				type: that.stateCurrent
			}).then(res => {
				if (res.code === 1) {
					that.couponList = res.data;
				}
			});
		},

		//跳转优惠券详情
		toCouponDetail(data) {
			if (data.user_coupons_id) {
				this.jump('/pages/app/coupon/detail', {
					id: data.id,
					userCouponId: data.user_coupons_id
				});
			} else {
				this.jump('/pages/app/coupon/detail', { id: data.id });
			}
		}
	}
};
</script>

<style lang="scss">
.page_box {
	background: #f5f8fd;
	/deep/.u-progress{
		border: 1rpx solid #FFF4E1
	}
	.content_box1 {
		height: 100vh;
		.top {
			width: 690rpx;
			height: 396rpx;
			background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/999.png')
				no-repeat center;
			background-size: cover;
			margin: 0 auto;
			margin-top: 34rpx;
			padding: 0 30rpx;
			overflow: hidden;
			.layer {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 30rpx;

				text {
					height: 33rpx;
					line-height: 33rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
				image {
					margin-left: 18rpx;
					width: 34rpx;
					height: 34rpx;
				}
			}
			.scndFlr {
				display: flex;
				justify-content: center;
				margin-top: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
			.line {
				width: 630rpx;
				height: 2rpx;
				background: #fff4e1;
				border-radius: 1rpx;
				margin-top: 30rpx;
			}
			.progressBar,
			.progressBar1 {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 29rpx;
				height: 29rpx;
				.text1 {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
				.text2 {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
			}
			.bottom {
				margin-top: 36rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
		.consumptionFlow {
			width: 690rpx;
			height: 29rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 30rpx;
			padding: 30rpx;
			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
			text {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
		.list {
			width: 690rpx;
			height: 100rpx;
			background: #ffffff;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			.left {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-end;
				.text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #eabb6c;
					margin-left: 19rpx;
				}
				.text1 {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
	}
	.content_box2 {
		height: 100vh;
		.top {
			width: 690rpx;
			height: 396rpx;
			background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/999.png')
				no-repeat center;
			background-size: cover;
			margin: 0 auto;
			margin-top: 34rpx;
			padding: 0 30rpx;
			overflow: hidden;
			.layer {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 30rpx;

				text {
					height: 33rpx;
					line-height: 33rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
				image {
					margin-left: 18rpx;
					width: 34rpx;
					height: 34rpx;
				}
			}
			.scndFlr {
				display: flex;
				justify-content: center;
				margin-top: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
			.line {
				width: 630rpx;
				height: 2rpx;
				background: #fff4e1;
				border-radius: 1rpx;
				margin-top: 30rpx;
			}
			.progressBar,
			.progressBar1 {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 29rpx;
				height: 29rpx;
				.text1 {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
				.text2 {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
			}
			.bottom {
				margin-top: 36rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
		.consumptionFlow {
			width: 690rpx;
			height: 29rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 30rpx;
			padding: 30rpx;
			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
			text {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
		.list {
			width: 690rpx;
			height: 100rpx;
			background: #ffffff;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			.left1 {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				display: flex;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					//background-color: red;
				}
				text {
					height: 28rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 28rpx;
					margin-left: 20rpx;
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-end;
				.text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #eabb6c;
					margin-left: 19rpx;
				}
			}
		}
	}
	.content_box3 {
		height: 100vh;
		.top {
			width: 690rpx;
			height: 160rpx;
			background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/11.png')
				no-repeat center;
			background-size: cover;
			margin: 0 auto;
			margin-top: 34rpx;
			padding: 0 30rpx;
			overflow: hidden;
			.layer {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 30rpx;

				text {
					height: 33rpx;
					line-height: 33rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
				image {
					margin-left: 16rpx;
					width: 34rpx;
					height: 34rpx;
				}
			}
			.scndFlr {
				display: flex;
				justify-content: center;
				margin-top: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
		.consumptionFlow {
			width: 690rpx;
			height: 29rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 30rpx;
			padding: 30rpx;
			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
			text {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
		.list {
			width: 690rpx;
			height: 100rpx;
			background: #ffffff;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			.left {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-end;
				.text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #eabb6c;
				}
				.text1 {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					margin-top: 3rpx;
				}
			}
		}
	}
}
.coupon-nav {
	background: #f5f8fd;
	height: 100rpx;

	.nav-item {
		flex: 1;

		.item-title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 76rpx;
		}

		.nav-line {
			width: 120rpx;
			height: 4rpx;
			background: #f5f8fd;
		}

		.line-active {
			background: rgba(230, 184, 115, 1);
		}
	}
}
.coupon-list {
	margin: 30rpx 20rpx;
}
</style>
